<template>
  <div v-if="process && process.key !== 'fxaa'" class="item-panel">
    <!-- 全局滤镜 -->
    <div v-if="process.key === 'brightness'">
      <ProgressInput
        :process="process"
        :code="'brightness'"
        :rule="rules.brightness.brightness"
        :label="'亮度'"
        @handler="postProcess('brightness')"
      />
    </div>
    <!-- 黑白渐变 -->
    <div v-if="process.key === 'black_and_white'">
      <ProgressInput
        :process="process"
        :code="'gradations'"
        :rule="rules.black_and_white.gradations"
        :label="'渐变层次'"
        @handler="postProcess('black_and_white')"
      />
    </div>
    <!-- 描边效果 -->
    <div v-if="process.key === 'silhouette'">
      <div class="row-item color-picker-item">
        <span>颜色</span>
        <el-color-picker
          class="color-picker"
          v-model="process.value.color"
          @change="postProcess('silhouette')"
        />
      </div>

      <ProgressInput
        :process="process"
        :code="'length'"
        :rule="rules.silhouette.length"
        :label="'长度'"
        @handler="postProcess('silhouette')"
      />
    </div>
    <!-- 全局泛光 -->
    <div v-if="process.key === 'bloom'">
      <ProgressInput
        :process="process"
        :code="'contrast'"
        :rule="rules.silhouette.contrast"
        :label="'对比度'"
        @handler="postProcess('bloom')"
      />
      <ProgressInput
        :process="process"
        :code="'brightness'"
        :rule="rules.silhouette.brightness"
        :label="'亮度'"
        @handler="postProcess('bloom')"
      />
      <ProgressInput
        :process="process"
        :code="'delta'"
        :rule="rules.silhouette.delta"
        :label="'权重'"
        @handler="postProcess('bloom')"
      />
      <ProgressInput
        :process="process"
        :code="'sigma'"
        :rule="rules.silhouette.sigma"
        :label="'标准差'"
        @handler="postProcess('bloom')"
      />

      <ProgressInput
        :process="process"
        :code="'stepSize'"
        :rule="rules.silhouette.stepSize"
        :label="'步长'"
        @handler="postProcess('bloom')"
      />
      <div class="row-item">
        <el-checkbox
          v-model="process.value.glowOnly"
          label="仅显示光晕"
          size="large"
          @change="postProcess('bloom')"
        />
      </div>
    </div>
    <!-- 环境光遮蔽 -->
    <div v-if="process.key === 'ambient_occlusion'">
      <ProgressInput
        :process="process"
        :code="'intensity'"
        :rule="rules.ambient_occlusion.intensity"
        :label="'强度'"
        @handler="postProcess('ambient_occlusion')"
      />
      <ProgressInput
        :process="process"
        :code="'lengthCap'"
        :rule="rules.ambient_occlusion.lengthCap"
        :label="'长度上限'"
        @handler="postProcess('ambient_occlusion')"
      />
      <ProgressInput
        :process="process"
        :code="'stepSize'"
        :rule="rules.ambient_occlusion.stepSize"
        :label="'步长'"
        @handler="postProcess('ambient_occlusion')"
      />
      <ProgressInput
        :process="process"
        :code="'bias'"
        :rule="rules.ambient_occlusion.bias"
        :label="'偏移'"
        @handler="postProcess('ambient_occlusion')"
      />
      <ProgressInput
        :process="process"
        :code="'blurStepSize'"
        :rule="rules.ambient_occlusion.blurStepSize"
        :label="'模糊步长'"
        @handler="postProcess('ambient_occlusion')"
      />
      <div class="row-item">
        <el-checkbox
          v-model="process.value.ambientOcclusionOnly"
          label="仅环境遮蔽"
          size="large"
          @change="postProcess('ambient_occlusion')"
        />
      </div>
    </div>
    <!-- 动态模糊 -->
    <div v-if="process.key === 'dynamic_fuzzy'">
      <ProgressInput
        :process="process"
        :code="'kernelWidth'"
        :rule="rules.dynamic_fuzzy.kernelWidth"
        :label="'动态模糊'"
        @handler="postProcess('dynamic_fuzzy')"
      />
    </div>
    <!-- 夜视效果 -->
    <div v-if="process.key === 'night_vision'">
      <div class="row-item color-picker-item">
        <span>颜色</span>
        <el-color-picker
          class="color-picker"
          v-model="process.value.color"
          @change="postProcess('night_vision')"
        />
      </div>
    </div>
    <!-- 景深效果 -->
    <div v-if="process.key === 'depth_field'">
      <ProgressInput
        :process="process"
        :code="'focalDistance'"
        :rule="rules.depth_field.focalDistance"
        :label="'焦距'"
        @handler="postProcess('depth_field')"
      />
      <ProgressInput
        :process="process"
        :code="'delta'"
        :rule="rules.depth_field.delta"
        :label="'权重'"
        @handler="postProcess('depth_field')"
      />
      <ProgressInput
        :process="process"
        :code="'sigma'"
        :rule="rules.depth_field.sigma"
        :label="'标准差'"
        @handler="postProcess('depth_field')"
      />
      <ProgressInput
        :process="process"
        :code="'stepSize'"
        :rule="rules.depth_field.stepSize"
        :label="'步长'"
        @handler="postProcess('depth_field')"
      />
    </div>
    <!-- 雾效设置 -->
    <div v-if="process.key === 'fog'">
      <div class="row-item color-picker-item">
        <span>颜色</span>
        <el-color-picker
          class="color-picker"
          v-model="process.value.color"
          @change="postProcess('fog')"
        />
      </div>
      <ProgressInput
        :process="process"
        :code="'alpha'"
        :rule="rules.fog.alpha"
        :label="'透明度'"
        @handler="postProcess('fog')"
      />
    </div>
    <!-- 抗锯齿设置 -->
  </div>
</template>

<script setup lang="ts">
import { ProcessRule } from '@/views/enum/global-effect';
import { cloneDeep } from 'lodash';
import ProgressInput from './progress-input.vue';

defineOptions({
  name: 'Content',
});

interface IProps {
  process: any;
}

const props = withDefaults(defineProps<IProps>(), {
  process: {},
});

const rules = ProcessRule;
const process = props.process;

function postProcess(name: string) {
  const cimInstance = window.cimInstance;
  const data = cloneDeep(process.value);
  // color置空，color填充默认值
  if (name === 'silhouette' && !data.color) {
    data.color = 'rgba(255, 0, 0, 1)';
  }
  if (name === 'night_vision' && !data.color) {
    data.color = 'rgba(0, 255, 0, 1)';
  }
  if (name === 'fog' && !data.color) {
    data.color = 'rgba(255, 255, 255, 0.8)';
  }
  cimInstance.api.updatePostProcessByName(name, data);
}
</script>

<style lang="less" scoped>
.item-panel {
  background: #1c1f24;
  border-radius: 4px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 0 10px 10px;

  &.disable {
    cursor: none;
    pointer-events: none;
  }

  .progress-input {
    width: 66px;

    margin-left: 7px;
  }

  .row-item {
    margin-top: 10px !important;

    &.color-picker-item {
      padding-top: 10px !important;
    }
  }

  :deep(.el-color-picker) {
    margin-left: 12px;
  }
}
</style>
